<!-- 头像 -->
<template>
  <div>
    <div
      :style="{
        width: size + 'px',
        height: size + 'px',
        fontSize: size / 2.5 + 'px'
      }"
      v-if="Array.isArray(content)"
      class="avatar_group_box"
    >
      <div v-for="(item, index) in content" :key="index">
        <img
          :style="formateImg(item, 1).style"
          v-if="item && item.includes('avatar/')"
          :src="formateImg(item, 2).url"
          alt=""
        />
        <div
          :style="{
            width: size / computNum(content.length) + 'px',
            height: size / computNum(content.length) + 'px',
            fontSize: size / 5 + 'px'
          }"
          class="group_name_box"
          v-else
        >
          {{ item && item.slice(-1) }}
        </div>
      </div>
    </div>
    <div
      v-else
      :style="{
        width: size + 'px',
        height: size + 'px',
        fontSize: size / 2.5 + 'px'
      }"
      class="avatar_name_box"
    >
      <img
        v-if="content && content.includes('avatar/')"
        :src="formateImg(content).url"
        alt=""
      />
      <span v-else>{{ content && content.slice(-2) }}</span>
    </div>
  </div>
</template>

<script>
import { isURL } from "@/utils/tools"
export default {
  name: "avatarPage",
  props: {
    content: [String, Array],
    size: {
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      isURL
    }
  },

  created() {},

  computed: {},

  methods: {
    getSplitNum() {
      this.list.length
    },
    formateImg(val, num = 0) {
      let pxNum = this.size
      if (Array.isArray(this.content)) {
        pxNum = parseInt(this.size / this.computNum(this.content.length))
      }

      return {
        // eslint-disable-next-line no-undef
        url: minioEndpoint_mini + val,
        style: {
          width: pxNum + "px",
          height: pxNum + "px",
          display: "block"
        }
      }
    },
    computNum(len) {
      if (len <= 2) {
        return 2
      }
      if (len === 3 || len === 4) {
        return 2
      } else {
        return 3
      }
    }
  }
}
</script>
<style lang="less" scoped>
.avatar_name_box {
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: rgba(var(--color-primary));
  // background: #0176f6;
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.avatar_group_box {
  border-radius: 4px;
  background: rgb(210, 215, 231);
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: center;
  align-content: center;
  overflow: hidden;
  div {
    font-size: 0;
  }
}
.group_name_box {
  border: 1px solid #d2d7e7;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgb(var(--color-primary));
  // background: #0176f6;
}
</style>
